<template>
  <div class="new-clients">
    <a-spin :spinning="loading" tip="Loading...">
      <div class="new-clients-date-choose">
        <div v-for="(item, index) in newClientsPerformance" :key="index" class="choose-content">
          <div class="choose-item" :class="chooseIndex === index ? 'active' : ''" @click="handleChoose(index)">
            <div class="date">{{ item.costYearMonth }}</div>
            <div class="price">{{ item.currentCommission }} {{ item.currencyName }}</div>
          </div>
          <a-divider type="vertical" style="height: 24px; background-color: #dcdee7" />
        </div>
      </div>
      <div style="padding: 24px">
        <ETitle :title="'Date ' + newClients.costYearMonth" />
        <div v-if="newClients?.details?.length > 0">
          <div class="banner-list">
            <banner
              class="vw5"
              title="Monthly Quota"
              :subTitle="newClients.monthQuota.toFixed(2) + ' ' + newClients.currencyName"
            />
            <banner
              class="vw5"
              title="History Settled"
              :subTitle="newClients.aCostAmount.toFixed(2) + ' ' + newClients.currencyName"
            />
            <banner
              class="vw5"
              title="History Unsettled"
              :subTitle="newClients.aUnCostAmount.toFixed(2) + ' ' + newClients.currencyName"
            />
            <banner
              class="vw5"
              title="Current Amount"
              :subTitle="newClients.currentAmount.toFixed(2) + ' ' + newClients.currencyName"
            />
            <banner
              class="vw5"
              title="Current Settlement Amount"
              :subTitle="newClients.currentCostAmount.toFixed(2) + ' ' + newClients.currencyName"
            />
            <banner
              class="vw5"
              title="Current Commission"
              :subTitle="newClients.currentCommission.toFixed(2) + ' ' + newClients.currencyName"
            />
            <banner
              class="vw5"
              title="Invoice Estimate (Current Month)"
              :subTitle="newClients.invoiceEstimate.toFixed(2) + ' ' + newClients.currencyName"
            />
          </div>
          <div class="commission-range">
            <div class="commission-range-top">
              <div class="left" style="justify-content: flex-end">Quota Amount</div>
              <div class="center">Commission Percentage</div>
              <div class="right">Commission</div>
            </div>
            <div v-if="newClients.filterDetails.length === 0" style="padding: 10px">no current commission</div>
            <div v-for="(item, index) in newClients.filterDetails" :key="index" class="commission-range-list">
              <div class="left" style="justify-content: flex-end">{{ item.quotaAmount }} {{ item.currencyName }}</div>
              <div class="center">{{ (item.moneyPercent * 100).toFixed(2) }}%</div>
              <div class="right">{{ item.costMoney }} {{ item.currencyName }}</div>
            </div>
          </div>
        </div>
        <div
          v-if="newClients?.details?.length === 0"
          style="margin-top: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center"
        >
          <NoData fontSize="100px" />
          <span style="color: rgba(107, 121, 142, 0.85)">No Data</span>
        </div>
        <div class="invoice-detail">
          <div class="invoice-detail-top">{{ newClients.costYearMonth }} Invoice Details</div>
          <a-table :columns="columns" :data-source="newClients.performanceInvoices" bordered :pagination="false">
            <template #emptyText>
              <e-empty>
                <template #description>
                  <div>No Data</div>
                </template>
              </e-empty>
            </template>
          </a-table>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ETitle from '@/components/ETitle.vue'
import banner from './banner.vue'
import NoData from '../../../components/NoData.vue'
import pageColumns from '@/assets/script/page_columns.js'
import p from '@/api/performance.js'

const route = useRoute()
const receivedPayment = pageColumns.receivedPayment2
const columns = reactive(receivedPayment)
const paymentNum = ref()
const employee = ref()
const newClientsPerformance = ref([])
const newClients = ref({})
const loading = ref(false)
const chooseIndex = ref(0)
/**
 * 选择日期
 * @param index
 */
const handleChoose = index => {
  chooseIndex.value = index
  newClients.value = newClientsPerformance.value[chooseIndex.value]
  filterData()
}
const getData = () => {
  loading.value = true
  p.getPerformanceNewClients({
    PaymentNum: paymentNum.value,
    EmpID: employee.value
  })
    .then(res => {
      if (res.code === 2000) {
        newClientsPerformance.value = res.data.newClientsPerformance
        filterData()
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
const filterData = () => {
  newClients.value = newClientsPerformance.value[chooseIndex.value]
  if (newClients.value.details.length > 0) {
    const arr = []
    newClients.value.details.forEach(item => {
      if (item.costMoney !== 0) {
        arr.push(item)
      }
    })
    newClients.value.filterDetails = arr
  }
}

onMounted(() => {
  paymentNum.value = route.query.paymentNum
  employee.value = route.query.employee
  getData()
})
</script>

<style scoped lang="less">
.new-clients-date-choose {
  width: 100%;
  border-bottom: 1px solid @border-color;
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  .choose-content {
    width: 9%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .choose-item {
      width: 100%;
      height: 80px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: @text-black;
      font-size: 14px;
      cursor: pointer;
    }
    .active {
      color: @primary-color;
      font-weight: 700;
    }
  }
}
.banner-list {
  display: flex;
  padding-left: 12px;
  margin-top: 24px;
}
.commission-range {
  margin-top: 24px;
  width: 100%;
  border: 1px solid @border-color;
  box-sizing: border-box;
  .commission-range-top {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid @border-color;
    background-color: @bg-color;
    box-sizing: border-box;
    display: flex;
    color: @text-gray;
  }
  .commission-range-list {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid @border-color;
    box-sizing: border-box;
    display: flex;
    color: @black-85p;
    &:last-child {
      border-bottom: none;
    }
  }
  .left,
  .center,
  .right {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .left,
  .center {
    border-right: 1px solid @border-color;
  }
  .left,
  .right {
    padding-left: 12px;
    padding-right: 12px;
  }
  .center,
  .right {
    justify-content: flex-end;
    padding-right: 12px;
  }
}
.invoice-detail {
  width: 100%;
  margin-top: 16px;
  .invoice-detail-top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border: 1px solid @border-color;
    //border-bottom: none;
    background-color: @bg-color;
    padding-left: 12px;
    color: @text-gray;
  }
}
.vw5 {
  margin-right: 5vw;
}
.invoice-detail {
  width: 100%;
  margin-top: 16px;
  .invoice-detail-top {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    border: 1px solid @border-color;
    //border-bottom: none;
    background-color: @bg-color;
    padding-left: 12px;
    color: @text-gray;
  }
}
:deep(.ant-table-thead) > tr > th,
:deep(.ant-table-tbody) > tr > td {
  height: 40px !important;
  font-size: 12px !important;
}
:deep(.ant-table-thead) > tr > th {
  background-color: @milk !important;
  border-color: @border-color !important;
}
:deep(.ant-table-tbody) > tr:not(.table-striped) > td {
  border-color: @border-color !important;
}
</style>
